<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../react18/react.development.js"></script>
    <script src="../react18/react-dom.development.js"></script>
    <script src="../react18/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      /*
        useState:
          * useState可以让函数式组件像类式组件一样拥有state状态,并且状态更新后,函数式组件也会重新渲染
          * 语法`const [xxx,setXXX] = useState(initData)`
            1. 解构出来的第一个值,是当前state的数据源,交给UI使用
            2. 解构出来的第二个值,是一个改变当前state的函数,并且函数一旦被调用就会驱动函数式组件重新渲染
            3. useState的参数initData,可以直接是一个初始值,也可以是一个函数(return的值就是当前state的值)
          * setXXX的使用
            1. 直接把新值传递进去作为参数
            2. 参数是一个函数,函数接受当前setXxx对应的数据为参数,函数的返回值就是新设置的值

      */
      function App() {
        const [count, setCount] = React.useState(0);

        const changeCount = () => {
          // setCount(count + 1);
          setCount((y) => y + 1);
        };

        return (
          <div>
            <h1>App组件</h1>
            <button
              onClick={() => {
                console.log(1);
              }}
            >
              按钮
            </button>

            <button onClick={changeCount}>按钮</button>
            <p>count的值是:{count}</p>
          </div>
        );
      }

      ReactDOM.createRoot(document.getElementById("app")).render(<App />);
    </script>
  </body>
</html>
